<template>
    <VRow class="mt-5">
        <VCol md="12">
        <!-- 👉 Product Information -->
        <VCard
            class="mb-6"
            title="任务交付"
        >
        <template #append>
            <section v-if="taskDelivery">
                <span class="mr-5" style="color:red" v-if="taskDelivery.status === 2">{{taskDelivery.reason?`拒绝原因::${taskDelivery.reason}`:''}}</span>
                <VBtn @click="handleSubmit()" :loading="loading" :disabled="disabled" :color="TASK_DELIVERY_BUTTON_STYLE[taskDelivery.status].color">
                    {{ TASK_DELIVERY_BUTTON_STYLE[taskDelivery.status].title }}</VBtn>
            </section>
            <VBtn v-else @click="handleSubmit()" :loading="loading">交付</VBtn>
        </template>
        <VCardItem>
            <span class="mb-1">成果图片</span>
            </VCardItem>

            <VCardText>
            <OssUploadDropZone :disabled="disabled" v-model:fileUrls="form.image"/>
            </VCardText>
            <VCardText>
            <VRow>
                <VCol>
                <span class="mb-1">交付备注</span>
                <ProductDescriptionEditor
                    :editable = "!disabled"
                    v-model="form.remark"
                    placeholder="这是一条验收备注"
                    class="border rounded"
                />
                </VCol>
            </VRow>
            </VCardText>
        </VCard>

        <!-- 👉 Media -->
        <VCard class="mb-6">

        </VCard>
        </VCol>
    </VRow>
</template>

<script setup>
import { getTaskDelivery,addTaskDelivery,updateTaskDelivery } from '@/api/task'
import { useRoute,useRouter } from "vue-router";
import { computed } from 'vue';

const props = defineProps({
  taskId: {
    type: Number,
    required: true,
  }
})

const loading = ref(false)

const taskDelivery = ref()

const getDelivery = async() => {
    loading.value = true
    const res = await getTaskDelivery(props.taskId).finally(() => loading.value = false)
    taskDelivery.value = res.data
    form.value.id = res.data?.id
    form.value.image = res.data?.image
    form.value.remark = res.data?.remark
}

getDelivery()

const disabled = computed(() => {
    if (loading.value) {
        return true
    }
    if (taskDelivery.value && taskDelivery.value?.status !==2) {
        return true
    }
    return false
})

const form = ref({
  id:undefined,
  image:[],
  remark: "",
  taskId: props.taskId
});
const handleSubmit = async () => {
  loading.value = true
  if (form.value.id) {
    await updateTaskDelivery(form.value).finally(()=>loading.value = false)
  }else{
    await addTaskDelivery(form.value).finally(()=>loading.value = false)
  }
  getDelivery()
}

const TASK_DELIVERY_BUTTON_STYLE = {
    0: {title: "待验收", color: "info"},
    1: {title: "验收成功", color: "success"},
    2: {title: "重新交付", color: "primary"},
}


</script>